<template>
	<div class="register">
		<div>
			<p style="text-align: center;color: #969696;">
				<i class="el-icon-notebook-2"></i>用户注册
			</p>
		</div>
		<hr>
		<el-row>
			<el-col :span="12" style="text-align: center;">
				<el-image style="width:70%;height: 400px;" :src="`http://127.0.0.1/api/public/showimg/${fileList[0].raw}`">
				</el-image>
				<!-- :before-upload="beforeAvatarUpload" -->
				<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
					:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
					action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg,image/png">
					<h2>点击这里更新图片</h2>
				</el-upload>
			</el-col>
			<el-col :span="12">
				<el-form ref="user" :model="user" label-width="80px" style="width: 80%;">
					<el-form-item label="账号" style="margin-top: 10px;">
						<el-input v-model="user.account"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="user.password" show-password></el-input>
					</el-form-item>
					<el-form-item label="确认密码">
						<el-input v-model="user.password2" show-password></el-input>
					</el-form-item>
					<el-form-item label="昵称">
						<el-input v-model="user.name"></el-input>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input v-model="user.phone"></el-input>
					</el-form-item>
					<el-form-item label="vip用户">
						<el-select v-model="user.vip">
							<el-option label="普通用户" value="0"></el-option>
							<el-option label="vip用户" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="地址">
						<el-input type="textarea" v-model="user.addr" placeholder="请输入地址"></el-input>
					</el-form-item>
					<el-form-item style="text-align: right;">
						<el-button type="primary" @click="registerNewUser()"
							style="border: 0; background-color: #c83232; width: 45%; margin-top: 20px;"><i
								class="el-icon-user"></i>&nbsp;&nbsp;注册新用户</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import qs from 'qs'
	export default {
		name: 'Register',
		components: {},
		data() {
			return {
				fileList: [],
				user: {
					account: '',
					password: '',
					name: '',
					phone: '',
					vip: '',
					addr: ''
				},
			}
		},
		methods: {
			registerNewUser() {
				if (this.user.account == '') {
					this.$message.error('账号不得为空！')
				} else if (this.user.password == '') {
					this.$message.error('密码不得为空！')
				} else if (this.user.password.length < 4) {
					this.$message.error('密码不得少于4位数!')
				} else if (this.user.password !== this.user.password2) {
					this.$message.error('两次密码不一致，请重新输入！！！')
				} else if (this.user.name == '') {
					this.$message.error('昵称不得为空！')
				} else if (this.user.phone == '') {
					this.$message.error('手机号不得为空！')
				} else if (this.user.vip == '') {
					this.$message.error('请选择用户类型！')
				} else if (this.user.addr == '') {
					this.$message.error('地址不得为空！')
				} else if (this.fileList.length == 0) {
					this.$message.error('请选择图片！')
				} else {
					let fd = new FormData();
					fd.append("mypic", this.fileList[0].raw);
					fd.append("nickname", this.user.name);
					fd.append("account", this.user.account);
					fd.append("password", this.user.password);
					fd.append("phone", this.user.phone);
					fd.append("vip", this.user.vip);
					fd.append("addr", this.user.addr);
					this.$axios.post("/api/public/addUser", fd, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf8'
						}
					}).then(
						(resp) => {
							console.log(resp.data.data);
							this.$message({
								message: '注册成功！！',
								type: 'success'
							});
							this.$router.push('/pc/home');
						})
				}
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;
				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			//获取到需要上传的文件或图片函数
			handleChange(file, fileList) {
				this.fileList = fileList;
			}
		}
	}
</script>

<style>
	.el-input__inner:focus {
		border-color: #ff4e00;
	}

	.el-input el-input--suffix is-focus:focus {
		border-color: #ff4e00;
	}

	.register {
		width: 85%;
		margin: 50px auto;
	}

	.register_box {
		width: 100%;
		position: fixed;
		bottom: 10px;
	}
</style>